<template>
    <div  v-if="isShowEditFrom" class="timing">
      <el-row style="margin-bottom:10px;display: none;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="key">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入数据库名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser()"><Icon type="md-add" />创建表单内容</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <admincentertb v-if="shouTable" ref="httbRef" width="320" :btn-is-show="btnIsShow" :table-col="tabUserList" :table-data="tableUserData"
        @getDataDetileInfo="getDataDetileInfo"
        @deleteSelectData="deleteSelectData" @refresh="getUserList">
       <template v-slot:autoBtn="slotProps">
        <el-button slot="autoBtn" type="text" @click="fkConfig(slotProps.data)">风控配置</el-button>
       </template>
          
      </admincentertb>
      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;display: none;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
        <!-- 名称和路径必输 -->
        <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm autoClass">
          
          <el-form-item label="名称" prop="name">
            <el-input :disabled="disFlag" v-model="ruleForm['name']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="表单标识" prop="place">
            <el-select :disabled="disFlag" multiple  @change="getPalce" v-model="ruleForm['place']" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.place"
                :label="item.name"
                :value="item.place">
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="不允许修改表单" prop="notAllowChangePlace">
            <el-select :disabled="disFlag" multiple  v-model="ruleForm['notAllowChangePlace']" placeholder="请选择">
                <el-option
                v-for="item in notAllowChangePlaceOptions"
                :key="item.place"
                :label="item.name"
                :value="item.place">
                </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: center;">
          <el-button type="primary" @click="submitForm(true)">确定</el-button>
          <el-button @click="submitForm(false)">返回</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-else class="timing">
      <fromedit v-if="tagType=='fromedit'" :getSelectObj="getSelectObj"></fromedit>
      <fileconfig v-if="tagType=='fileconfig'" :getSelectObj="getSelectObj"></fileconfig>
      <fkconfig v-if="tagType=='fkconfig'" :getSelectObj="getSelectObj"></fkconfig>
    </div>
  </template>
  
  <script>
  import { frompage } from '@/api/home_/adminCenter'
  import fromedit from './fromContentFromEdit'
  import fileconfig from './fileConfig'
  import fkconfig from './fkConfig'
  import request from '@/utils/request'
  export default {
    components: {fromedit,fileconfig,fkconfig},
    data() {
      return {
        tagType:'fromedit',
        notAllowChangePlaceOptions:[],
        shouTable:true, //修改参数配置成功返回不更i性能表数据
        getSelectObj:null,
        isShowEditFrom:true,
        options:[],
        cascaderoptions: [],
        elradioOptionsa:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        ruleForm2:{},
        btnIsShow: {
          operate: true,
          outParamsConfig:true,
          fjConfig:true,
          detile: true,
          del: true
        },
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        title: '新增',
        rules: {
        },
        dialogTableVisible: false,
        ruleForm: {
            "place":"",
            "name": "",
            "notAllowChangePlace":""
        },
        userId: '',
        formInline: {
          'dataModelName': '',
          'dataModelTypeId': ''
        },
        addParms: [],
        addParms2: [],
        fullscreenLoading:false,
        tabUserList: [
          {
            key: 'name',
            title: '名称'
          },
          {
            key: 'placeName',
            title: '表单'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {
        frompage({
          'pgIndex': 1,
          'pgSize':1000
        }).then(res => {
          this.options = res.data.records
        })
    },
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
      })
    },
    methods: {
       
        getPalce(){
          this.ruleForm['notAllowChangePlace'] = ''
          this.notAllowChangePlaceOptions = this.options.filter((item,index)=>{
            return this.ruleForm['place'].includes(item.place)
          })
        },
        showList(v){
            this.isShowEditFrom = true
            if(v=='true'){
                this.$nextTick(res=>{
                    this.shouTable = false
                    this.getUserList()
                })
            }
        },
        fkConfig(v){
          this.isShowEditFrom = false
          this.getSelectObj = JSON.stringify(v)
          this.tagType='fkconfig'
        },
        showFileConfig(v){
          this.tagType = 'fileconfig'
          this.getSelectObj = v
          this.isShowEditFrom = false
        },
        outParamsConfigParentFun(v){
            this.tagType = 'fromedit'
            this.getSelectObj = v
            this.isShowEditFrom = false
        },
        submitForm(v){
            if(!v){ //返回
                this.dialogTableVisible = false
                return 
            }

            let p = JSON.parse(JSON.stringify(this.ruleForm))
            p.place = p.place.toString()
            p.notAllowChangePlace = p.notAllowChangePlace.toString()
            request({
                url: '/ht-bpmn/externalParameterEntity/saveOrUpdate',
                method: 'post',
                data:p
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success('保存成功')
                    this.shouTable = false
                    this.getUserList()
                } else {
                    this.errorDialog(res.msg)
                }
            })
        },
        addUser( ){
          this.ruleForm ={
              "place":"",
              "name": "",
              "notAllowChangePlace":""
          }
          this.dialogTableVisible = true
        },
        editRowData(v){
          this.title = '修改'
          this.ruleForm = JSON.parse(v)
          let arr1 = this.ruleForm.place&&this.ruleForm.place.split(',')||[]
          let arr2 = this.ruleForm.notAllowChangePlace && this.ruleForm.notAllowChangePlace.split(',')||[]
          this.$set(this.ruleForm,'place',arr1)
          this.$set(this.ruleForm,'notAllowChangePlace',arr2)
       
          this.dialogTableVisible = true
          this.notAllowChangePlaceOptions = this.options.filter((item,index)=>{
            return this.ruleForm.place.includes(item.place)
          })
        },
        deleteSelectData(v) {
            request({
                url: '/ht-bpmn/externalParameterEntity/delete?id='+v.id,
                method: 'get'
            }).then(res => {
                if (res.code == 200) {
                    this.getUserList()
                } else {
                    this.errorDialog(res.msg)
                }
            })
        },
        handleNodeClick(data) {
            console.log(data)
        }, 
        handleSizeChange(v) {
          this.page = 1
            this.size = v
            this.getUserList()
        },
        handleCurrentChange(v) {
            this.page = v
            this.getUserList()
        },
    
        // 获取用户列表
        getUserList() {
            this.dialogTableVisible = false
            this.$refs.httbRef.isShowLoading(true)
            request({
                url: '/ht-bpmn/externalParameterEntity/page?pageIndex='+this.page+"&pageSize="+this.size,
                method: 'get'
            }).then(res => {
                if (res.code == 200) {
                    this.shouTable = true
                    this.tableUserData = res.data.records
                    this.total = res.data.total
                    this.$refs.httbRef.isShowLoading(false)
                } else {
                that.$notify.error({
                    title: '错误',
                    message: res.msg
                })
                }
            })
        }
        }
    }
  </script>
  
  <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
  